<template>
  <el-dialog v-model="billStore.billDialog.visible"
             title="账单内容" center class="bill-dialog"
             @open="openDialogEvent">
    <el-form ref="formRef" :model="billStore.billDialog.data"
             :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账本类型" prop="bookName">
            <el-radio-group v-model="billStore.billDialog.data.bookName"
                            @change="changeBillBookNameEvent">
              <el-radio v-for="(item, index) in billStore.billBookList"
                        :value="item.name" :key="index">
                <template #default>
                  <i :class="item.icon" :style="{color: item.color}"/>
                  <span style="margin-left: 5px;">{{ item.name }}</span>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="账单类别" prop="type">
            <el-radio-group v-model="billStore.billDialog.data.type"
                            @change="changeBillCategoryEvent">
              <el-radio v-for="(item, index) in billInfo.billTypeList"
                        :value="item" :key="index">
                {{ getBillTypeName(item) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="账单分类" prop="category">
            <el-radio-group v-model="billStore.billDialog.data.category">
              <el-radio v-for="(item, index) in billInfo.billCategoryList"
                        :value="item.name" :key="index">
                <template #default>
                  <i :class="item.icon" :style="{color: item.color}"/>
                  <span style="margin-left: 5px;">{{ item.name }}</span>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="账单时间" prop="date">
            <el-date-picker
                v-model="billStore.billDialog.data.date"
                type="date" :editable="false" placeholder="请选择账单时间"
                value-format="YYYY-MM-DD"/>
          </el-form-item>

          <el-form-item label="账单地点" prop="location">
            <el-input v-model="billStore.billDialog.data.location" autocomplete="off"
                      placeholder="请输入账单地点"  clearable
                      show-word-limit maxlength="10">
              <template #prefix>
                <el-icon class="el-input__icon"><location/></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="账单账户" prop="payAccount">
            <el-radio-group v-model="billStore.billDialog.data.payAccount">
              <el-radio v-for="(item, index) in billStore.billPayList"
                        :value="item.name" :key="index">
                <template #default>
                  <i :class="item.icon" :style="{color: item.color}"/>
                  <span style="margin-left: 5px;">{{ item.name }}</span>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="账单金额" prop="amount">
            <amount-input v-model="billStore.billDialog.data.amount"/>
          </el-form-item>

          <el-form-item label="账单内容" prop="content">
            <el-input v-model="billStore.billDialog.data.content" autocomplete="off"
                      placeholder="请输入账单内容"  clearable
                      show-word-limit maxlength="10">
              <template #prefix>
                <el-icon class="el-input__icon"><document/></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账单备注">
            <el-input v-model="billStore.billDialog.data.remark" type="textarea"
                      placeholder="请输入账单备注" clearable
                      :rows="5" show-word-limit maxlength="200">
            </el-input>
          </el-form-item>
          <el-form-item label="账单图片">
            <upload-image v-model="billStore.billDialog.data.imageList"
                          :service-url="fileServiceUrl"
                          :service-file-root-path="serviceFileRootPath"
                          :image-path="billStore.billImagePath"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">
          {{ billStore.billApiType === 'UPDATE' ? '编辑' : '新增' }}
        </el-button>
        <el-button v-if="billStore.billApiType === 'UPDATE'"
                   type="danger" @click="deleteClick">
          删除
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { UploadImage, AmountInput } from 'vue3-common'
import { useBillStore } from '@/store/bill.ts'
import { Location, Document } from '@element-plus/icons-vue'
import { FormRules } from 'element-plus'
import { billRecordRules } from '@/utils/element/elRules.ts'
import { nextTick, reactive, ref } from 'vue'
import { IBillCategory } from '@/types/bill.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'

const formRef = ref()
const rules = reactive<FormRules>(billRecordRules)
const billStore = useBillStore()

const billInfo = reactive({
  billTypeList: [] as string[],
  billCategoryList: [] as IBillCategory[]
})

/**
 * 打开对话框事件
 */
const openDialogEvent = async () => {
  // 如果是新增账单 默认选择第一个账本
  if (billStore.billApiType !== 'UPDATE') {
    billStore.billDialog.data.bookName = billStore.billBookList[0].name
  }
  getBillTypeByBookName(billStore.billDialog.data.bookName)

  // 如果是新增账单 默认选择一个类别
  if (billStore.billApiType !== 'UPDATE') {
    billStore.billDialog.data.type = billInfo.billTypeList[0]
  }
  getBillCategory()

  // 如果是新增账单 默认选择一个分类
  if (billStore.billApiType !== 'UPDATE') {
    billStore.billDialog.data.category = billInfo.billCategoryList[0].name
    billStore.billDialog.data.payAccount = billStore.billPayList[0].name
  }

  await nextTick(() => {
    formRef.value.clearValidate()
  })
}

/**
 * 获取账单类型名称
 * @param type 账单类型
 */
const getBillTypeName = (type: string) => {
  return type === 'expensive' ? '支出' : '收入'
}

/**
 * 选择账本事件
 * @param value 账本名称
 */
const changeBillBookNameEvent = (value: string) => {
  getBillTypeByBookName(value)
  billStore.billDialog.data.type = billInfo.billTypeList[0]
  getBillCategory()
  billStore.billDialog.data.category = billInfo.billCategoryList[0].name
}

/**
 * 选择账单类别事件
 */
const changeBillCategoryEvent = () => {
  getBillCategory()
  billStore.billDialog.data.category = billInfo.billCategoryList[0].name
}

/**
 * 通过账本获取账单类型
 * @param bookName 账本
 */
const getBillTypeByBookName = (bookName: string) => {
  billInfo.billTypeList = []
  billStore.billCategoryList.forEach((item) => {
    if (item.bookName === bookName && !billInfo.billTypeList.includes(item.type)) {
      billInfo.billTypeList.push(item.type)
    }
  })
}

/**
 * 获取账单类别
 */
const getBillCategory = () => {
  billInfo.billCategoryList = billStore.billCategoryList.filter((value) => {
    return value.bookName === billStore.billDialog.data.bookName
        && value.type === billStore.billDialog.data.type
  })
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(() => {
    billStore.handleBillApi(billStore.billDialog.data)
  })
}

const cancelClick = () => {
  billStore.billDialog.visible = false
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该账单内容?').then(() => {
    billStore.billApiType = 'DELETE'
    billStore.handleBillApi(billStore.billDialog.data)
  })
}
</script>
